<template>
	<div>
		<view class=" " v-if="false">
			<view class='searchGood'>
				<view class="dis navBtnWrap">
					<view class="navBtn-left" @click="chooseLocation">
						选择地址
					</view>
					<view class="navBtn-right dis">
						<view class='search acea-row row-between-wrapper'>
							<view class='input acea-row row-between-wrapper'>
								<text class='iconfont icon-sousuo2'></text>
								<input type='text' :value='searchValue' :focus="focus" placeholder='点击搜索商品'
									placeholder-class='placeholder' @input="setValue"></input>
								<image style="width: 30rpx;height: 30rpx;margin-left: 10rpx;" @click="cleanKeyWord"
									src="@/static/com/icon_close.png" mode=""></image>
							</view>
							<view class='bnt' @tap='searchBut'>搜索</view>
						</view>
					</view>

				</view>
			</view>



		</view>


		<div class="storeBox" ref="container">
			<view class="list_1 flex-col">
				<view class="list-items_1 flex-col" v-for="(item, index) in storeList" @click="changeStore(item)"
					:key="index">
					<view class="text-wrapper_3 flex-row">
						<text class="text_7">{{item.name}}</text>
					</view>
					<view class="box_6 flex-row">
						<view class="box_7 flex-col">
							<view class="image-text_2 flex-row ">

								<image class="label_2" src="@/static/pagesA/icon_yysj.png" mode=""></image>
								<!-- <image
			      class="label_2"
			      referrerpolicy="no-referrer"
			      :src="item.lanhuimage0"
			    /> -->
								<text class="text-group_2">{{item.dayTime}}</text>
							</view>
							<view class="group_5 flex-row justify-between">
								<image class="label_2" src="@/static/pagesA/icon_dw.png" mode=""></image>

								<text class="text_8">{{item.address}},{{item.detailedAddress}}</text>
							</view>
							<text class="text_9">距您{{ item.distance/1000 }}千米</text>
						</view>
						<view class="image-text_3 flex-col justify-between" @click.stop="showMaoLocation(item)">
							<image class="image_2" src="@/static/pagesA/icon_dh.png" mode=""></image>
							<text class="text-group_3">地图</text>
						</view>
						<view class="image-text_3 flex-col justify-between" @click="call(item.phone)">
							<image class="image_2" src="@/static/pagesA/icon_dt.png" mode=""></image>

							<text class="text-group_3">电话</text>
						</view>
					</view>

				</view>
			</view>

			<Loading :loaded="loaded" :loading="loading"></Loading>
		</div>
		<div>
			<!-- <iframe v-if="locationShow && !isWeixin" ref="geoPage" width="0" height="0" frameborder="0" style="display:none;"
			 scrolling="no" :src="
          'https://apis.map.qq.com/tools/geolocation?key=' +
            mapKey +
            '&referer=myapp'
        ">
			</iframe> -->
		</div>
	</div>
</template>

<script>
	import Loading from "@/components/Loading";
	import {
		storeListApi
	} from "@/api/store";
	import {
		isWeixin
	} from "@/utils/index";
	// #ifdef H5
	import {
		wechatEvevt,
		wxShowLocation
	} from "@/libs/wechat";
	// #endif

	import {
		mapGetters
	} from "vuex";
	// import cookie from "@/utils/store/cookie";
	const LONGITUDE = "user_longitude";
	const LATITUDE = "user_latitude";
	const MAPKEY = "mapKey";
	export default {
		name: "storeList",
		components: {
			Loading
		},
		// computed: mapGetters(["goName"]),
		data() {
			return {
				page: 1,
				limit: 20,
				loaded: false,
				loading: false,
				storeList: [],
				system_store: {},
				// mapKey: cookie.get(MAPKEY),
				locationShow: false,
				user_latitude: 0,
				user_longitude: 0,
				type: ''
			};
		},
		onLoad(e) {
			this.type = e.type
			console.log(e.type, '这是啥啊')
			try {
				this.user_latitude = uni.getStorageSync('user_latitude');
				this.user_longitude = uni.getStorageSync('user_longitude');
			} catch (e) {
				// error
			}
		},
		mounted() {
			if (this.user_latitude && this.user_longitude) {
				this.getList();
			} else {
				this.selfLocation();
				this.getList();
			}
			// this.$scroll(this.$refs.container, () => {
			//   !this.loading && this.getList();
			// });
		},
		methods: {
			// changeStore
			changeStore(item) {
				if (this.type == 1) {
					let pages = getCurrentPages() //获取所有页面栈的实例列表
					let nowPage = pages[pages.length - 1] //当前页面的实例
					let prevPage = pages[pages.length - 2] //上一个页面的实例
					prevPage.$vm.expressType = item.name //更改上一个页面的数据
					prevPage.$vm.expressTypeData = item
					uni.navigateBack({
						delta: 1 //返回上一页
					})
				}
				console.log(item, ';;')
			},
			call(phone) {
				uni.makePhoneCall({
					phoneNumber: phone,
				});
			},
			selfLocation() {
				let self = this
				// #ifdef H5
				if (self.$wechat.isWeixin()) {
					self.$wechat.location().then(res => {
						this.user_latitude = res.latitude;
						this.user_longitude = res.longitude;
						uni.setStorageSync('user_latitude', res.latitude);
						uni.setStorageSync('user_longitude', res.longitude);
						self.getList();
					})
				} else {
					// #endif	
					uni.getLocation({
						type: 'wgs84',
						success: (res) => {
							try {
								this.user_latitude = res.latitude;
								this.user_longitude = res.longitude;
								uni.setStorageSync('user_latitude', res.latitude);
								uni.setStorageSync('user_longitude', res.longitude);
							} catch {}
							self.getList();
						},
						complete: function() {
							self.getList();
						}
					});
					// #ifdef H5	
				}
				// #endif
			},
			showMaoLocation(e) {
				let self = this;
				// #ifdef H5
				if (self.$wechat.isWeixin()) {
					self.$wechat.seeLocation({
						latitude: Number(e.latitude),
						longitude: Number(e.longitude)
					}).then(res => {
						console.log('success');
					})
				} else {
					// #endif	
					uni.openLocation({
						latitude: Number(e.latitude),
						longitude: Number(e.longitude),
						name: e.name,
						address: `${e.address}-${e.detailedAddress}`,
						success: function() {
							console.log('success');
						}
					});
					// #ifdef H5	
				}
				// #endif
			},
			// 选中门店
			checked(e) {

				uni.$emit("handClick", {
					address: e
				});
				uni.navigateBack();
				// if (this.goName === "orders") {
				//   this.$store.commit("GET_STORE", e);
				//   this.$router.go(-1); //返回上一层
				// }
			},
			// 获取门店列表数据
			getList: function() {
				if (this.loading || this.loaded) return;
				this.loading = true;
				let data = {
					latitude: this.user_latitude || "", //纬度
					longitude: this.user_longitude || "", //经度
					page: this.page,
					limit: this.limit
				};
				storeListApi(data)
					.then(res => {
						this.loading = false;
						this.loaded = res.data.list.length < this.limit;
						this.storeList.push.apply(this.storeList, res.data.list);
						this.page = this.page + 1;
					})
					.catch(err => {
						this.$dialog.error(err);
					});
			}
		},
		onReachBottom() {
			this.getList();
		}
	};
</script>

<style lang="scss" scoped>
	@import 'com/selfPickUpSite.css';
	@import '@/com/css/common.css';
	.text_9{
		color: $maincolor!important;
	}
	.searchGood .search {

		background-color: #fff !important;
	}

	.searchGood .search {}

	.searchGood .search .input {
		// width: 598rpx;
		background-color: #f7f7f7;
		border-radius: 33rpx;

		box-sizing: border-box;
		height: 66rpx;
		padding: 0px 10rpx;
	}

	.searchGood .search .input input {
		align-items: center;
		font-size: 26rpx;
		margin-right: 10rpx;
	}

	.searchGood .search .input .placeholder {
		color: #bbb;
	}

	.searchGood .search .input .iconfont {
		color: #000;
		font-size: 35rpx;
	}

	.searchGood .search .bnt {
		width: 120rpx;
		text-align: center;
		height: 66rpx;
		line-height: 66rpx;
		font-size: 24rpx;
		margin-right: 6px;
		color: #fff;
		background: $maincolor;
		border-radius: 30px 30px 30px 30px;
		opacity: 1;

	}

	.searchGood .title {
		font-size: 28rpx;
		color: #999;
		margin: 50rpx 30rpx 25rpx 30rpx;
		justify-content: space-between;
		align-items: center;

		image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.searchGood .list {
		padding-left: 10rpx;
	}

	.searchGood .list .item {
		font-size: 26rpx;
		color: #454545;
		padding: 0 21rpx;
		/* height: 60rpx; */
		border-radius: 30rpx;
		/* line-height: 60rpx; */

		margin: 0 0 20rpx 20rpx;
		padding: 8rpx 37rpx;
		background: #F1F1F1;
	}

	.searchGood .line {
		border-bottom: 1rpx solid #eee;
		margin: 20rpx 30rpx 0 30rpx;
	}

	.navBtnWrap {
		align-items: center;
		padding: 30rpx 15rpx;
		margin: 20rpx auto;
		background: #fff;

		.navBtn-left {
			width: 25%;
		}

		.navBtn-right {
			width: 75%;

			justify-content: space-between;
		}
	}








	.geoPage {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		z-index: 10000;
	}

	.storeBox {
		width: 100%;
		background-color: #fff;
		padding: 0 30rpx;
	}

	.storeBox-box {
		width: 100%;
		height: auto;
		display: flex;
		align-items: center;
		padding: 23rpx 0;
		justify-content: space-between;
		border-bottom: 1px solid #eee;
	}

	.store-cent {
		display: flex;
		align-items: center;
		width: 80%;
	}

	.store-cent-left {
		width: 45%;
	}

	.store-img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 6rpx;
		margin-right: 22rpx;
	}

	.store-img img {
		width: 100%;
		height: 100%;
	}

	.store-name {
		color: #282828;
		font-size: 30rpx;
		margin-bottom: 22rpx;
		font-weight: 800;
	}

	.store-address {
		color: #666666;
		font-size: 24rpx;
	}

	.store-phone {
		width: 50rpx;
		height: 50rpx;
		color: #fff;
		border-radius: 50%;
		display: block;
		text-align: center;
		line-height: 48rpx;
		background-color: #e83323;
		margin-bottom: 22rpx;
		text-decoration: none;
	}

	.store-distance {
		font-size: 22rpx;
		color: #e83323;
	}

	.iconfont {
		font-size: 20rpx;
	}

	.row-right {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		width: 33.5%;
	}
</style>